import { history } from 'umi';
import React, { useState } from 'react';
import { Flex, NavBar, Input, Form, Picker, Button, Image, Uploader, Dialog, Checkbox, ActionSheet } from 'react-vant';
import { SafeArea } from 'antd-mobile';
import './profile.less';

const goBack = () => {
  history.back();
}
const goJoinResult = () => {
  history.push('/join-result');
}

export default function JoinPwPage() {
  const [form] = Form.useForm()
  const [visible, setVisible] = useState(false)
  const onCancel = () => setVisible(false)
  return (
    <div className='join-pw'>
      <NavBar title='陪玩入驻'
              leftText='返回'
              onClickLeft={goBack}
              rightText={
                <Flex className='profile-user' align='center'>
                  <Flex.Item className='profile-user-avatar'>
                    <Image round width='24' height='24' fit='cover'
                           src='//res.dayupp.com/partner/9fa863d7ab9db21d6763ad29fa4695c1.jpg' />
                  </Flex.Item>
                  <Flex.Item className='profile-user-name'>小熊</Flex.Item>
                </Flex>
              } />
      <div className='container'>
        <Form form={form} className='profile-form'>
          <h3 className='profile-title'>基本资料（请真实填写）</h3>
          <Form.Item
            rules={[{ required: true, message: '昵称为必填项' }]}
            name='nickname'
            label='昵称'
          >
            <Input placeholder='请填写您的昵称' />
          </Form.Item>
          <Form.Item
            rules={[{ required: true, message: '年龄为必填项' }]}
            name='age'
            label='年龄'
          >
            <Input type='number' placeholder='请填写您的年龄' />
          </Form.Item>
          <Form.Item
            rules={[{ required: true, message: '身高为必填项' }]}
            name='height'
            label='身高'
            suffix={<span className='unit'>cm</span>}
          >
            <Input type='number' placeholder='请填写您的身高' />
          </Form.Item>
          <Form.Item
            rules={[{ required: true, message: '体重为必填项' }]}
            name='weight'
            label='体重'
            suffix={<span className='unit'>kg</span>}
          >
            <Input type='number' placeholder='请填写您的体重' />
          </Form.Item>
          <Form.Item
            rules={[{ required: true, message: '微信号为必填项' }]}
            name='wechat'
            label='微信'
          >
            <Input placeholder='请填写您的微信号' />
          </Form.Item>
          <Form.Item
            rules={[{ required: true, message: '手机号为必填项' }]}
            name='mobile'
            label='手机'
          >
            <Input type='tel' placeholder='请填写您的手机号' maxLength={11} />
          </Form.Item>
          <Form.Item
            isLink
            rules={[{ required: true, message: '所在城市为必选项' }]}
            name='city'
            label='城市'
            trigger='onConfirm'
            onClick={(_, action) => {
              // @ts-ignore
              action.current?.open()
            }}
          >
            <Picker
              defaultValue='武汉'
              popup
              columns={[
                '武汉',
                '长沙',
                '成都',
              ]}
            >
              {val => val || '请选择所在城市'}
            </Picker>
          </Form.Item>
          <Form.Item
            isLink
            rules={[{ required: true, message: '星座为必选项' }]}
            name='constellation'
            label='星座'
            trigger='onConfirm'
            onClick={(_, action) => {
              // @ts-ignore
              action.current?.open()
            }}
          >
            <Picker
              popup
              columns={[
                '水瓶座',
                '双鱼座',
                '白羊座',
                '金牛座',
                '双子座',
                '巨蟹座',
                '狮子座',
                '处女座',
                '天秤座',
                '天蝎座',
                '射手座',
                '摩羯座',
              ]}
            >
              {val => val || '请选择您的星座'}
            </Picker>
          </Form.Item>
          <Form.Item
            rules={[{ required: false, message: '请填写个人介绍' }]}
            name='intro'
            label='个人介绍'
          >
            <Input.TextArea rows={3} autoSize maxLength={140} showWordLimit
                            placeholder='请填写个人介绍，将展示在您的个人主页' />
          </Form.Item>
          <h3 className='profile-title'>可接单类型（多选）</h3>
          <div className='profile-event'>
            <Flex justify='start' gutter={10} wrap='wrap'>
              <Flex.Item span={6}>
                <div className='item'>
                  <img className='type-icon' src='//res.dayupp.com/partner/ce256b9a6227ae7a77f7c470f495e488.png'
                       alt='' />
                  <p>线下开黑</p>
                </div>
              </Flex.Item>
              <Flex.Item span={6}>
                <div className='item'>
                  <img className='type-icon' src='//res.dayupp.com/partner/59809efe258fbcc037298776bdd41b6b.png'
                       alt='' />
                  <p>线上陪练</p>
                </div>
              </Flex.Item>
              <Flex.Item span={6}>
                <div className='item active'>
                  <img className='type-icon' src='//res.dayupp.com/partner/a996962cdf0789e3749f11aca41a5b3f.png'
                       alt='' />
                  <p>共进晚餐</p>
                  <div className='selected'>
                    <svg width='17px' height='13px' viewBox='0 0 17 13' version='1.1'
                         xmlns='http://www.w3.org/2000/svg'>
                      <g stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' stroke-linecap='round'
                         stroke-linejoin='round'>
                        <g transform='translate(-2832.000000, -1103.000000)' stroke='#ffffff' stroke-width='3'>
                          <g transform='translate(2610.000000, 955.000000)'>
                            <g transform='translate(24.000000, 91.000000)'>
                              <g transform='translate(179.177408, 36.687816)'>
                                <polyline points='34.2767388 22 24.797043 31.4796958 21 27.6826527'></polyline>
                              </g>
                            </g>
                          </g>
                        </g>
                      </g>
                    </svg>
                  </div>
                </div>
              </Flex.Item>
              <Flex.Item span={6}>
                <div className='item'>
                  <img className='type-icon' src='//res.dayupp.com/partner/13e9c6b3a1ea7ab9741ff1c8c086bbd5.png'
                       alt='' />
                  <p>微醺小酌</p>
                </div>
              </Flex.Item>
              <Flex.Item span={6}>
                <div className='item active'>
                  <img className='type-icon' src='//res.dayupp.com/partner/a20a94966c2fa6dd31413c55334e3894.png'
                       alt='' />
                  <p>一起观影</p>
                  <div className='selected'>
                    <svg width='17px' height='13px' viewBox='0 0 17 13' version='1.1'
                         xmlns='http://www.w3.org/2000/svg'>
                      <g stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' stroke-linecap='round'
                         stroke-linejoin='round'>
                        <g transform='translate(-2832.000000, -1103.000000)' stroke='#ffffff' stroke-width='3'>
                          <g transform='translate(2610.000000, 955.000000)'>
                            <g transform='translate(24.000000, 91.000000)'>
                              <g transform='translate(179.177408, 36.687816)'>
                                <polyline points='34.2767388 22 24.797043 31.4796958 21 27.6826527'></polyline>
                              </g>
                            </g>
                          </g>
                        </g>
                      </g>
                    </svg>
                  </div>
                </div>
              </Flex.Item>
              <Flex.Item span={6}>
                <div className='item'>
                  <img className='type-icon' src='//res.dayupp.com/partner/b7f5ab6607f0da8c930a2d3a1796e800.png'
                       alt='' />
                  <p>台球助教</p>
                </div>
              </Flex.Item>
              <Flex.Item span={6}>
                <div className='item'>
                  <img className='type-icon' src='//res.dayupp.com/partner/d4163e8c1492e1c2af9a2c607d19a74e.png'
                       alt='' />
                  <p>密室逃脱</p>
                </div>
              </Flex.Item>
              <Flex.Item span={6}>
                <div className='item active'>
                  <img className='type-icon' src='//res.dayupp.com/partner/fdb0314e3a3eb47e30049f6bb7ff2caa.png'
                       alt='' />
                  <p>一起散步</p>
                  <div className='selected'>
                    <svg width='17px' height='13px' viewBox='0 0 17 13' version='1.1'
                         xmlns='http://www.w3.org/2000/svg'>
                      <g stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' stroke-linecap='round'
                         stroke-linejoin='round'>
                        <g transform='translate(-2832.000000, -1103.000000)' stroke='#ffffff' stroke-width='3'>
                          <g transform='translate(2610.000000, 955.000000)'>
                            <g transform='translate(24.000000, 91.000000)'>
                              <g transform='translate(179.177408, 36.687816)'>
                              <polyline points='34.2767388 22 24.797043 31.4796958 21 27.6826527'></polyline>
                              </g>
                            </g>
                          </g>
                        </g>
                      </g>
                    </svg>
                  </div>
                </div>
              </Flex.Item>
              <Flex.Item span={6}>
                <div className='item'>
                  <img className='type-icon' src='//res.dayupp.com/partner/ae139c3bd22b33074f047fc6ca06dafe.png'
                       alt='' />
                  <p>一起唱歌</p>
                </div>
              </Flex.Item>
              <Flex.Item span={6}>
                <div className='item'>
                  <img className='type-icon' src='//res.dayupp.com/partner/11915b92953901e2db8264d196cb870d.png'
                       alt='' />
                  <p>剧本桌游</p>
                </div>
              </Flex.Item>
              <Flex.Item span={6}>
                <div className='item'>
                  <img className='type-icon' src='//res.dayupp.com/partner/63b29a07f946cd333358924055733a98.png'
                       alt='' />
                  <p>旅游向导</p>
                </div>
              </Flex.Item>
              <Flex.Item span={6}>
                <div className='item active'>
                  <img className='type-icon' src='//res.dayupp.com/partner/1f646b0cead757771829ad5ceb21d8c3.png'
                       alt='' />
                  <p>连麦聊天</p>
                  <div className='selected'>
                    <svg width='17px' height='13px' viewBox='0 0 17 13' version='1.1'
                         xmlns='http://www.w3.org/2000/svg'>
                      <g stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' stroke-linecap='round'
                         stroke-linejoin='round'>
                        <g transform='translate(-2832.000000, -1103.000000)' stroke='#ffffff' stroke-width='3'>
                          <g transform='translate(2610.000000, 955.000000)'>
                            <g transform='translate(24.000000, 91.000000)'>
                              <g transform='translate(179.177408, 36.687816)'>
                                <polyline points='34.2767388 22 24.797043 31.4796958 21 27.6826527'></polyline>
                              </g>
                            </g>
                          </g>
                        </g>
                      </g>
                    </svg>
                  </div>
                </div>
              </Flex.Item>
            </Flex>
          </div>
          <h3 className='profile-title'>个人展示资料</h3>
          <Form.Item
            name='avatar'
            label='上传头像'
            rules={[{ required: true, message: '请上传头像' }]}
          >
            <Uploader maxCount={1} onDelete={() => Dialog.confirm({ title: '提示', message: '确认删除?🤔' })} />
          </Form.Item>
          <Form.Item
            name='video'
            label='上传视频'
            rules={[{ required: false, message: '请上传视频' }]}
          >
            <Uploader maxCount={1} />
          </Form.Item>
          <Form.Item
            name='photos'
            label='上传照片'
            rules={[{ required: true, message: '请上传至少3张照片' }]}
            intro='至少上传 3 张照片，最多可上传 9 张'
          >
            <Uploader maxCount={9} multiple onDelete={() => Dialog.confirm({ title: '提示', message: '确认删除?🤔' })} />
          </Form.Item>
          <Form.Item
            name='tags'
            label='个人标签'
            rules={[{ required: true, message: '请选择3个个人标签' }]}
          >
            <Flex className='choose-tags' gutter={5} wrap='wrap'>
              <Flex.Item className='tag active'><span>密室爱好者</span></Flex.Item>
              <Flex.Item className='tag active'><span>玩乐达人</span></Flex.Item>
              <Flex.Item className='tag active'><span>酒搭子</span></Flex.Item>
              <Flex.Item className='tag'><span>氛围制造者</span></Flex.Item>
              <Flex.Item className='tag'><span>御姐</span></Flex.Item>
              <Flex.Item className='tag'><span>萝莉</span></Flex.Item>
              <Flex.Item className='tag'><span>在校学生</span></Flex.Item>
              <Flex.Item className='tag'><span>电竞少女</span></Flex.Item>
            </Flex>
          </Form.Item>
          <Form.Item
            name='agreement'
            rules={[{ required: true, message: '必须同意平台用户协议' }]}
          >
            <Checkbox checkedColor='#a880ff'><div className='agreement'>请先阅读并同意<span onClick={() => setVisible(true)}>《用户协议》</span></div></Checkbox>
          </Form.Item>
          <Button className='profile-submit-btn' round nativeType='submit' type='primary' size='large' color='linear-gradient(to right, #454545, #111)' block onClick={goJoinResult}>
            提 交
          </Button>
          <SafeArea position='bottom' />
        </Form>
      </div>
      <ActionSheet title='用户协议' visible={visible} onCancel={onCancel}>
        <div className='user-agreement'>
          <p>感谢您选择并信任大鱼约玩！请仔细阅读本条款，同意后方可进行下一步。</p>
          <p><strong>大鱼约玩是一个健康绿色的约玩平台。平台仅提供绿色约玩媒介服务，严令禁止一切违反法律法规，破坏社会秩序的行为！</strong></p>
          <p><strong>平台严令禁止的行为：</strong></p>
          <ol>
            <li>01、发布的内容涉嫌反动、反政治、反社会；宣扬恐怖、邪教、封建迷信；损害国家利益、危害国家安全、破坏民族团结；散布谣言，扰乱社会秩序，破坏社会稳定；以非法占有为目的，利用虚构事实等方法诈取他人财物，泄露他人隐私等。</li>
            <li>02、诱导/教唆用户通过非本平台的第三方进行交易，使用微信、支付宝、现金红包、转账等支付方式均属于第三方私下交易范畴。</li>
            <li>03、发布宣传竞品的言论，宣传、鼓励使用其他竞品平台，以任何形式传播非本平台授权的平台或工具、广告信息等。</li>
            <li>04、发布或提供淫秽色情或低俗擦边服务，诱导用户进行情色服务或交易等。</li>
            <li>05、平台禁止通过任何方式散布或传播代练行为；任何代练行为平台都严令禁止。</li>
            <li>06、为用户提供除订单服务以外的服务，以获取利益。</li>
            <li>07、上传的照片、视频等内容非本人，侵犯他人隐私、肖像权的行为。</li>
          </ol>
          <p><strong>触发以上违规行为，平台将有权终止合作，并封禁账户，情节严重的将移交公安机关处理。</strong></p>
        </div>
      </ActionSheet>
    </div>
  );
}
